<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="strategy_head flexbox flexcenter flexbetween">
            <span class="font_16 color_01">{{name}}</span>
        </div>
        <div class="flexbox flexcenter flexbetween catch_plaf">
            <div class="catch_list flexbox flexcenter">
                <div class="catch_item" :class="{'active':queryInfo.pt_type==1}"  @click="selectType(1)">千川 PC</div>
                <div class="catch_item" :class="{'active':queryInfo.pt_type==2}" @click="selectType(2)">小店随心推</div>
            </div>
            <el-date-picker style="width:260px" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" clearable size="small" @change="getDataList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" height="100%" @sort-change='sortChange'>
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="blogger_name" label="达人名称">
                </el-table-column>
                <el-table-column prop="stat_cost" label="消耗" sortable="custom">
                </el-table-column>
                <el-table-column prop="pay_order_count" label="成交订单数" sortable="custom">
                </el-table-column>
                <el-table-column prop="pay_order_amount" label="成交订单金额" sortable="custom">
                </el-table-column>
                <el-table-column prop="update_time" label="数据更新时间">
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            name:"",
            queryInfo: {
                id:"",
                query: "",
                page: 1,
                limit: 20,
                pt_type: 1,
                date:[],
                order_field:"",
                order_types:"",
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.name = this.$route.query.name
        this.queryInfo.id = this.$route.query.id
        this.queryInfo.date = this.formatNowDate()
        this.getDataList(1);
    },
    methods: {
        formatNowDate() {
            let date = new Date();
            var myyear = date.getFullYear();
            var mymonth =
                date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1;
            var myweekday =
                date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            let day_start = myyear + "-" + mymonth + "-" + myweekday;
            let day = [day_start, day_start];
            return day;
        },

        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "/launch/Chase/ChaseModelData",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        selectType(type){
            this.queryInfo.pt_type = type;
            this.getDataList(1);
        },

        // 排序
        sortChange(column) {
            this.queryInfo.order_field = "";
            this.queryInfo.order_types = "";
            if (!column.order) {
                this.getDataList(this.setpage);
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.queryInfo.order_types = order;
            this.queryInfo.order_field = column.prop;
            this.getDataList(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {},
};
</script>


<style scoped>
.strategy_head {
    border-bottom: 1px solid #ebebeb;
}
.table_box {
    padding: 0 20px;
}
.catch_plaf{
    padding: 0 20px;
    height: 60px;
    margin-bottom: 20px;
}
.catch_item{
    height: 60px;
    line-height: 60px;
    padding: 0 10px;
    position: relative;
    font-size: 16px;
    color: #616c85;
    cursor: pointer;
}
.catch_item::after {
    transform: scaleX(0);
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    border-top: 2px solid #4475ff;
    transition: all 0.3s;
}
.catch_item.active {
    color: #17233d;
}
.catch_item.active::after {
    transform: scaleX(1);
}
</style>

<style>
</style>

